<template>
	<view>
        <view  class="imageContainer" v-for="(item, index) in albumList" :key="index">
            <image class="icon" :src="item.cover" mode=""></image>
			<view class="right">
				<view class="title text-1line-ellipsis">
				    {{item.name}}
				</view>
				<sendTiktok 
					:id="item.id"
					:contentType="'album'"
					:title="item.name"
					>				
				</sendTiktok>
			</view>

        </view>
        
	</view>
</template>

<script>
    const api = require("@/static/js/api.js")
    const utils = require("@/static/js/utils.js")
    import {
        mapState,
        mapMutations,
        mapActions
    } from 'vuex';
    let that = null

    import sendTiktok from "./sendTiktok.vue"
	export default {
		data() {
			return {
                albumList:[],
			};
		},
        
        computed: {
            ...mapState({
                hasLogin: state => state.userInfo.hasLogin,
                isAuthPhone: state => state.userInfo.isAuthPhone,
                isAuthUserInfo: state => state.userInfo.isAuthUserInfo, 
                isSeller: state => state.userInfo.isSeller,
                sellerObj: state => state.userInfo.sellerObj,
                buyerObj: state => state.userInfo.buyerObj,
                shopInfo: state => state.userInfo.shopInfo,
            }),
        },
        components:{
			sendTiktok
		},
        created(options) {
            that = this;
            that.getProjectAlbums()
        },
        onShow() {
      
        },
        methods:{ 
            ...mapMutations(['setUserInfo', 'setLoginStatus', 'setUserId',"setOrigin"]),

            getProjectAlbums() {
                let that = this
                api.getProjectAlbums({
                    param: {
                        
                    }
                }).then(res => {
                    console.log(res)
                    if (res.success||(res.code==0)) {  
                        that.albumList = res.data
                    }
                })
            },
            gotoDetail(item){
                uni.navigateTo({
                    url:'./buildingAlbumDetail?id='+item.id
                })
            },
        }
	}
</script>

<style lang="scss">

    .imageContainer{
        width: 100%;
        background: #FFFFFF;
        box-shadow: 2rpx 2rpx 8rpx 4rpx #EEEEEE;
        border-radius: 20rpx;
        padding: 18rpx;
        box-sizing: border-box;
        margin-top: 32rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
        .icon{
            background-color: #F3F3F3;
            width: 250rpx;
            height: 150rpx;
        }
		.right{
			display: flex;
			flex-direction: column;
			align-items: flex-end;
			width: 300rpx;
			.title{
			    font-size: 28rpx;;
			    color: #666666;
			    line-height: 40rpx;
			    text-align: center;	
				margin-bottom: 30rpx;
			}
			.btn{
				height: 50rpx;
				width: 140rpx;
				border-radius: 30rpx;
				background-color: #007aff;
				color: #ffffff;
				font-size: 22rpx;
				text-align: center;
				line-height: 50rpx;
				margin-left: 20rpx;
				
			}
		}
        
    }
</style>
